<template>
	<view class="header">
		<view class="left" @click="onPhone">
			<image src="../../static/kefu.png" mode=""></image>
			<text>电话客服</text>
		</view>
		<!-- <text class="center"></text>
		<view class="left" @click="bindFeedback">
			<image src="../../static/feeback.png" mode=""></image>
			<text>意见反馈</text>
		</view> -->
	</view>
	<view class="content">
		<view class="top">
			<image src="../../static/wh.png" mode=""></image>
			<text>常见问题</text>
		</view>
		<view class="item" @click="bindQuestion(0)">
			<text>券问题</text>
			<view class="">
				<text style="border-bottom:2rpx solid #F7F7F7;">如何使用洗车券?</text>
				<text>优惠券可以延期使用么?</text>
			</view>
		</view>
		<view class="item" @click="bindQuestion(1)">
			<text>验券问题</text>
			<view class="">
				<text style="border-bottom:2rpx solid #F7F7F7;">如何验券?</text>
				<text>如何投诉商家?</text>
			</view>
		</view>
		<view class="item" style="border: none;" @click="bindQuestion(2)">
			<text>其他问题</text>
			<view class="">
				<text style="border-bottom:2rpx solid #F7F7F7;">关于年检代办</text>
				<text>关于特惠洗车</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onReachBottom,
		onShow
	} from '@dcloudio/uni-app'
	import {wxOpenid,checkLogin} from '@/utils/login-sdk.js'
	onReachBottom(() => {
		
	})
	/** 券问题*/
	const bindQuestion = (index)=>{
		uni.navigateTo({
			url:"/pages/question/question?page="+index
		})
	}
	/** 电话*/
	const onPhone = ()=>{
		checkLogin(()=>{
			uni.showActionSheet({
				itemList: ['4001088996', '立即呼叫'],
				success: function (res) {
					uni.makePhoneCall({
						phoneNumber: '4001088996' //仅为示例
					});
				},
				fail: function (res) {
					console.log(res.errMsg);
				}
			});
		})
		
	}
	/** 意见反馈*/
	const bindFeedback = ()=>{
		checkLogin(()=>{
			uni.navigateTo({
				url:"/pages/feedback/feedback"
			})
		})
		
	}
</script>

<style lang="scss">


	page {
		background: #F8F5F0;
	}
	.header{
		width: 702rpx;
		height: 202rpx;
		background: #FFFFFF;
		border-radius: 36rpx;
		border: 1px solid #F5F5F5;
		margin: 32rpx auto 18rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		.left{
			width: 350rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			image{
				display: block;
				width: 73rpx;
				height: 73rpx;
				margin-bottom: 15rpx;
			}
			text{
				font-size: 28rpx;
				color: #16191B;
			}
		}
		.center{
			width: 2rpx;
			height: 138rpx;
			background: #E5E5E5;
		}
	
	}
	.content{
		width: 606rpx;
		padding: 48rpx;
		background: #FFFFFF;
		border-radius: 36rpx;
		border: 1px solid #F5F5F5;
		margin: 0 auto;
		.top{
			display: flex;
			align-items: center;
			margin-bottom:44rpx;
			image{
				width: 36rpx;
				height: 36rpx;
				display: block;
				margin-right: 11rpx;
			}
			text{
				font-weight: bold;
				font-size: 36rpx;
				color: #16191B;
			}
		}
		.item{
			border-bottom:2rpx solid #F7F7F7;
			width: 604rpx;
			margin: 0 auto;
			display: flex;
			padding: 24rpx 0;
			>text{
				display: block;
				border-right: 2rpx solid #F7F7F7;
				width: 167rpx;
				height: 131rpx;
				line-height: 131rpx;
				text-align: center;
				font-size: 30rpx;
				color: #16191B;
			}
			>view{
				margin-left: 33rpx;
				text{
					display: block;
					width: 402rpx;
					color: #9B9FA2;
					font-size: 26rpx;
					line-height: 64rpx;
				}
			}
		}
	}
	
</style>